<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 大于等于4个元素时 隐藏 'color' */
      .palette li:first-child:nth-last-child(n + 4) .color-options a:after,
      .palette li:first-child:nth-last-child(n + 4) ~ li .color-options a:after {
        content: none;
      }

      /* 大于等于6个元素时 隐藏文字 */
      .palette li:first-child:nth-last-child(n + 6) .color-options a,
      .palette li:first-child:nth-last-child(n + 6) ~ li .color-options a {
        color: transparent;
        font-size: 0;
      }

      .palette li:only-child .delete {
        display: none;
      }

      /* From this point it’s just styling */
      .palette {
        display: flex;
        height: 200px;
        max-width: 900px;
        font: bold 90%/1 sans-serif;
      }

      .palette li {
        flex: 1;
        list-style: none;
        background: #d6e055;
      }

      .color-options {
        background: rgba(0, 0, 0, 0.5);
        padding: 10px;
        margin: 0 10px;
        overflow: hidden;
        border-radius: 0 0 10px 10px;
      }

      .color-options .add {
        float: left;
      }
      .color-options .delete {
        float: right;
      }

      .color-options a {
        color: white;
        text-decoration: none;
      }

      .color-options a:before {
        display: inline-block;
        font-size: 1rem;
        width: 1.3rem;
        margin-right: 0.3rem;
        text-align: center;
        line-height: 1.3;
        background: white;
        border-radius: 50%;
        letter-spacing: normal;
      }

      .color-options .add:before {
        content: '✚';
        color: #590;
      }

      .color-options .delete:before {
        content: '✖';
        color: #b00;
      }

      .color-options a:after {
        content: ' color';
        font-weight: normal;
      }
      .box{
        display: flex;
        width: 100%;
        height: 200px;
        border: 1px solid #333;
      }
    </style>
  </head>
  <body>
    <ul class="palette">
      <li>
        <div class="color-options">
          <a class="add" href="#">Add</a>
          <a class="delete" href="#">Delete</a>
        </div>
      </li>
    </ul>

    <script>
      var colors = [
          '#D6E055', // Agave
          '#082323',
          '#E6E2AF',
          '#A7A37E',
          '#EFECCA',
          '#046380', // Sandy stone beach
          '#1C171D',
          '#FEE169',
          '#CDD452',
          '#F9722E',
          '#C9313D', // Sushi Maki
          '#2E95A3',
          '#50B8B4',
          '#C6FFFA',
          '#E2FFA8' // Agave
        ],
        palette = document.querySelector('.palette'),
        template = palette.firstElementChild

      function addColor(template) {
        var li = template.cloneNode(true)
        var color = colors.pop()
        colors.unshift(color)
        li.style.background = color
        palette.insertBefore(li, template.nextSibling)
      }

      palette.onclick = function (evt) {
        var button = evt.target

        if (button.className == 'add') {
          addColor(button.parentNode.parentNode)
        } else if (button.className == 'delete') {
          var li = button.parentNode.parentNode
          li.parentNode.removeChild(li)
        }
      }
    </script>
  </body>
</html>
